<template>
	<view>
		<!-- 头部固定区域 -->
		<view class="topPlay" :style="{height: navHeight + topHeight + 'px'}">
			<view class="top" :style="{height: topHeight + 'px'}"></view>
			<view class="mid" :style="{height: navHeight + 'px'}">
				<view class="leftTop">
					<image class="backIcoB" @click="back()" src="@/static/images/other/back.png"></image>
				</view>
				<view class="title">考研英语</view>
			</view>
		</view>
		
		<!-- 单词列表区域 -->
		<view :style="{marginTop: navHeight + topHeight + 'px'}">
			<view class="wordList">
				<view class="wordItem" v-for="(item,index) in wordList" @click="clickWord(index)"
				:style="{'backgroundColor': index == selectIndex ? themeColorLess : ''}">
					<view class="top">
						<view class="word" :style="{'color':index == selectIndex ? themeColor : ''}">{{item.word}}</view>
						<view class="accent">{{item.accent}}</view>
					</view>
					<view class="bottom" v-if="index == selectIndex">
						<view class="meanCn">{{item.meanCn}}</view>
						<view class="right">
							<image v-if="!item.isCollection" @click="changeCollect(index)"
							mode="widthFix" class="coll" src="@/static/images/other/coll.png"></image>
							<image v-if="item.isCollection" @click="changeCollect(index)"
							mode="widthFix" class="coll" src="@/static/images/other/coll_succ2.png"></image>
							<image @click="toWord(index)" mode="widthFix" class="list" src="@/static/images/other/search_list.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {wordList,changeCollect} from "@/api/word.js";
	import popup from "@/components/popup.vue";
	export default {
		components:{popup},
		data() {
			return {
				topHeight:0,
				navHeight:0,
				selectIndex:-1,
				innerAudioContext:null,
				wordList:[],
				themeColor:"",
				themeColorLess:"",
			}
		},
		async onLoad(options){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
			
			this.topHeight = getApp().globalData.statusBarHeight;
			this.navHeight = getApp().globalData.navigationBarHeight;
			this.innerAudioContext = uni.createInnerAudioContext();
			let bookId = options.bookId;
			let type = options.type;
			let ans = (await wordList(bookId,type,1,99999)).data;
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				return;
			}
			console.log("单词列表",ans);
			this.wordList = ans.data.records;
		},
		methods: {
			clickWord(index){
				this.selectIndex = index;
				this.innerAudioContext.src = this.wordList[index].wordAudio;
				this.innerAudioContext.play();
			},
			back(){
				uni.navigateBack({
					
				})
			},
			toWord(index){
				uni.navigateTo({
					url:"/pages/word/word?wordId="+this.wordList[index].wordId+"&list=1",
				})
			},
			async changeCollect(index) {
				let isCollection = !this.wordList[index].isCollection;
				let wordId = this.wordList[index].wordId;
				let ans = (await changeCollect(wordId,isCollection)).data;
				console.log(ans);
				this.wordList[index].isCollection = !this.wordList[index].isCollection;
			}
		},
		
	}
</script>

<style lang="scss">
	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
	  font-family: "阿里妈妈数黑体 Bold";font-weight: 700;src: url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/Zy783dAt3eRd98T2Iac15.woff2") format("woff2"),
	  url("//at.alicdn.com/wf/webfont/o0WWhG36b3mC/IRR1JzGIlcg7vUbVtHtu1.woff") format("woff");
	  font-display: swap;
	}
	// 头部固定区域
	.topPlay{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.top{
			width: 100%;
			background-color: white;
		}
		
		.mid{
			background-color: white;
			margin: 0 $both-sides;
			position: relative;
			
			.leftTop{
				display: flex;
				height: 100%;
				align-items: center;
				color: #8d929a;
				font-size: 22rpx;
				
				.backIcoB{
					height: 40rpx;
					width: 40rpx;
				}
			}
			
			.title{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 30rpx;
				font-family: 阿里妈妈数黑体 Bold;
			}
		}
	}
	
	// 单词列表区域
	.wordList{
		margin-top: 100rpx;
		.wordItem{
			display: flex;
			border-bottom: solid $border-color $border-size;
			padding-left: 60rpx;
			flex-direction: column;
			
			.top{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				
				.word{
					padding: 26rpx 0;
					font-size: 30rpx;
					font-weight: 600;
				}
				
				.selectWord{
					
				}
				
				.accent{
					padding-left: 16rpx;
					color: #8d929a;
				}
			}
			
			.bottom{
				display: flex;
				justify-content: space-between;
				padding-bottom: 26rpx;
				.meanCn{
					font-size: 30rpx;
					font-family: 阿里妈妈数黑体 Bold;
				}
				.right{
					display: flex;
					
					image{
						width: 40rpx;
						margin-right: 40rpx;
					}
				}
			}
		}
		
		.selectWordItem{
			background-color: $theme-color-less;
		}
		
	}
</style>
